<template>
  <div class="app-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="150px">

      <el-card>
        <el-form-item label="题目类型 " prop="type">
          <el-select v-model="postForm.type" class="filter-item" @change="handleTypeChange">
            <el-option
              v-for="item in quTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="归属题库" prop="subject">
          <el-select v-model="postForm.subject" class="filter-item">
            <el-option 
              v-for="subject in subjects"
              :key = "subject.id"
              :label = "subject.name"
              :value = "subject.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="题目内容" prop="content">
          <el-input v-model="postForm.content" type="textarea" />
        </el-form-item>
      </el-card>

      <div v-if="postForm.type!==4" class="filter-container" style="margin-top: 25px">
        <el-table :data="postForm.answerList" :border="true" style="width: 100%;" >
          <el-table-column label="是否答案" width="120" align="center" >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="答案内容" >
            <template slot-scope="scope">
              <el-input v-model="scope.row.content" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px" >
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>

        <el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd">
          添加
        </el-button>

      </div>

      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button type="info" @click="routeBack">返回</el-button>
      </div>

    </el-form>
  </div>
</template>

<script>
import request from '@/request'

export default {
  name: 'QuDetail',
  data() {
    return {
      quTypes: [
        { value: 0, label: '选择题' }, // 0:单选 1:多选
        { value: 2, label: '填空题' },
        { value: 3, label: '论述题' },
      ],
      subjects: [ {id:0, name:'高级计算机网络'} ],
      postForm: {
        answerList: []
      },
      rules: {
        content: [ { required: true, message: '题目内容不能为空！' } ],
        type:  [ { required: true, message: '题目类型不能为空！' } ],
        subject: [ { required: true, message: '至少要选择一个科目！' } ]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    if(id){
      request({ method: 'post', url: '/question/query', 
        data: { current: 1, size: 5, params: {id} }
      })
      .then(resp=>{ 
        this.loadQuestion(resp.data.data.records[0])
      })
    }
    // 获取科目
    request({ method: 'post', url: '/subject/query', 
      data: { current: 1, size: 100, params: null }
    })
    .then(resp=>{ this.subjects = resp.data.data.records })
  },
  methods: {
    loadQuestion(entity){
      this.postForm = entity
      var choice = JSON.parse(entity.choice)
      var answer = JSON.parse(entity.answer)
      if(entity.choice)
        this.postForm.answerList = choice.map( c => { 
          return { isRight: answer.indexOf(c)>=0, content: c }
        })
      else
        this.postForm.answerList = answer.map( c => { 
          return { isRight: true, content: c }
        })
    },
    handleTypeChange(v) {
      this.postForm.answerList = []
      if (v === 0) {
        for(var i=0;i<4;i++)
          this.postForm.answerList.push({ isRight: false, content: '' })
      }
      else
        this.postForm.answerList.push({ isRight: true, content: '' })
    },

    handleAdd() {
      // 填空多个正确答案
      this.postForm.answerList.push({ isRight: this.postForm.type==2?true:false, content: '' })
    },

    removeItem(index) {
      this.postForm.answerList.splice(index, 1)
    },

    fetchData(id) {
      // fetchDetail(id).then(response => {
      //   this.postForm = response.data
      // })
    },
    submitForm() {
      // console.log(JSON.stringify(this.postForm))

      var rightCount = 0
      this.postForm.answerList.map(answer=>{
        if(answer.isRight)
          rightCount ++
      })

      if(this.postForm.type == 0 && rightCount == 0){
        this.$message.error('至少一个正确答案')
        return
      }

      var data = {
        id: this.postForm.id? this.postForm.id: null, 
        type: this.postForm.type?this.postForm.type:(rightCount?1:0),
        content: this.postForm.content,
        subject: this.postForm.subject,
        choice: this.postForm.type? null: JSON.stringify(this.postForm.answerList.map(item=>item.content)),
        answer: JSON.stringify(this.postForm.answerList.filter(item=>item.isRight).map(item=>item.content)),
      }

      var url = `/question/${data.id?'update':'add'}`

      request({
        method: 'post', url, data
      }).then(resp=>{
        if(resp.status == 200)
          this.$notify({ title: '成功', message: '试题保存成功！', type: 'success', duration: 2000 })
      })

      this.routeBack()
    },
    routeBack() {
      this.$router.push({ name: 'Questions' })
    }

  }
}
</script>

<style>
.filter-item{
  margin: 10px;
}
</style>

